<template>
  <div>{{ arr }}</div>
  <button @click="arr.push('新学生')">添加学生(当前已有{{ studentNumber }}个学生)</button>
</template>

<script setup>
import { ref, computed } from 'vue'

const arr = ref(['tom', 'rose'])

// // 计算属性步骤一,编写计算的函数
// const getLength = () => {
//   return arr.value.length
// }
// // 计算属性步骤二, 用 computed 包住这个函数, 处理过后就会返回一个计算属性
// const studentNumber = computed(getLength)

// 另外一种写法,就是直接拼在一起, 写回调函数即可
const studentNumber = computed(() => {
  return arr.value.length
})

</script>